import { createRef, useState } from 'react'

import avatar from '../images/avatar.png'

const Form = (props) => {
  const [txt, setTxt] = useState('')
  const txtRef = createRef()
  // 添加获取
  const addComment = () => {
    if (txt.trim() === '') return txtRef.current.focus()
    setTxt(txt)
    props.addComment(txt)
    setTxt('')
  }
  // 控制输入框状态
  const txtChange = e => {
    setTxt(e.target.value)
  }
  return (
    <div className="comment-send">
      <div className="user-face">
        <img className="user-head" src={avatar} alt="" />
      </div>
      <div className="textarea-container">
        <textarea
          cols="80"
          rows="5"
          placeholder="发条友善的评论"
          className="ipt-txt"
          value={txt}
          onChange={txtChange}
          ref={txtRef}
        />
        <button className="comment-submit" onClick={addComment}>
          发表评论
        </button>
      </div>
      <div className="comment-emoji">
        <i className="face"></i>
        <span className="text">表情</span>
      </div>
    </div>
  )
}
// class Form1 extends Component {
//   state = {
//     txt: '',
//   }
//   txtRef = createRef()
//   // 控制文本框状态
//   txtChange = (e) => {
//     // console.log(e);
//     this.setState({
//       txt: e.target.value,
//     })
//   }
//   // 添加获取
//   addComment = () => {
//     const { txt } = this.state
//     if (txt.trim() === '') return this.txtRef.current.focus()
//     this.props.addComment(txt)
//     this.setState({
//       txt: '',
//     })
//   }
//   render() {
//     return (
//       <div className="comment-send">
//         <div className="user-face">
//           <img className="user-head" src={avatar} alt="" />
//         </div>
//         <div className="textarea-container">
//           <textarea
//             cols="80"
//             rows="5"
//             placeholder="发条友善的评论"
//             className="ipt-txt"
//             value={this.state.txt}
//             onChange={this.txtChange}
//             ref={this.txtRef}
//           />
//           <button className="comment-submit" onClick={this.addComment}>
//             发表评论
//           </button>
//         </div>
//         <div className="comment-emoji">
//           <i className="face"></i>
//           <span className="text">表情</span>
//         </div>
//       </div>
//     )
//   }
// }

export default Form
